<template>
    <div class="flex-center bottom">
        <div class="flex-colum-center tabbaritem" v-for="(item, index) in data.patharray" :key="index"
            @click="topages(item, index)">
            <img :src="item.imgpath" class="ti" v-if="index == data.zindex">
            <img :src="item.unimgpath" class="ti" v-else>
            <span :class="['tt', index == data.zindex ? 'purple' : '']">{{ item.title }}</span>
        </div>

    </div>
</template>

<script setup>
// import { nextTick } from 'process';
import { reactive, computed, onMounted, nextTick, onUpdated, provide, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
let data = reactive({
    zindex: 0,
    path: '/home',
    patharray: [{
        unimgpath: require('../assets/image/tabbar/footer01.png'),
        imgpath: require('../assets/image/tabbar/footer01_h.png'),
        title: '首页',
        isactive: false,
        path: '/home'
    }, {
        unimgpath: require('../assets/image/tabbar/footer02.png'),
        imgpath: require('../assets/image/tabbar/footer02_h.png'),
        title: '分类',
        isactive: false,
        path: '/category'
    }, {
        unimgpath: require('../assets/image/tabbar/footer03.png'),
        imgpath: require('../assets/image/tabbar/footer03_h.png'),
        title: '购物车',
        isactive: false,
        path: '/cart'
    }, {
        unimgpath: require('../assets/image/tabbar/footer04.png'),
        imgpath: require('../assets/image/tabbar/footer04_h.png'),
        title: '个人中心',
        isactive: false,
        path: '/profile'
    }]
})
let topages = (item, index) => {
    data.zindex = index
    data.path = item.path
    router.replace(data.path)
}

setInterval(() => {
    xpath()
}, 100);

// 修改路径
let xpath = () => {
    if (route.path === '/home') {
        data.zindex = 0
    }
    if (route.path === '/category') {
        data.zindex = 1
    }
    if (route.path === '/cart') {
        data.zindex = 2
    }
    if (route.path === '/profile') {
        data.zindex = 3
    }
    if (route.path === '/buygoodscart') {
        data.zindex = 3
    }
}





</script>

<style scoped>
@import url('../assets/css/base.css');

.tabbaritem {
    width: 25%;
    height: 1.6667rem;
}

.bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: #fff;
}

.ti {
    width: 0.7rem;
    height: 0.7rem;
}

.tt {
    font-size: 0.4rem;
    padding-top: 0.133rem;
}

.purple {
    color: #8d8fe3;
}
</style>